<template>
	<view class="zone">
		<view class="status_bar"><!-- 这里是状态栏 --></view>
		<Header title="夺宝订单" color="#fff"></Header>
		<view class="top_min">
			<scroll-view lower-threshold="50" @scrolltolower="scrolltolower" style="height: 100%" scroll-y="true">
				<view class="main">
					<view class="box">
						<view class="tab">
							<view v-for="item in tablist" :key="item.id" :class="[stat == item.id?'active':'']"
								@click="tabchange(item.id)">{{item.name}}</view>
						</view>

						<view class="list">
							<view class="itembox" v-for="(item,index) in listdata[stat]" :key="index">
								<view class="left">
									<view class="outside">
										<image
											:src="item.img?imgurl + item.img:'http://img.cpgm.cc/panda/static/login/logo.png'"
											mode="widthFix" />
									</view>
									<view class="word">
										<text>{{item.name}}x1</text>
										<view>期数： <text>{{item.remark}}</text></view>
									</view>
								</view>
								<text :class="[item.status==2?'color1':item.status==3?'color2':item.status==4?'color3':'color1']"><text>{{item.status==2?'待开奖':item.status==3?'中奖了':item.status==4?'未中奖':'未知'}}</text></text>
							</view>

							<view class="empty" v-if="listdata[stat] == ''">
								<image src="http://img.cpgm.cc/panda/static/public/empty.png" mode="widthFix" />
								<text class="zanwu">暂无数据哦~</text>
							</view>
							<u-loadmore v-else :status="status" :icon-type="iconType" :load-text="loadText" />
						</view>


					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import config from '@/common/config/index.js'
	export default {
		data() {
			return {
				imgurl: config.imgurl,
				headerimgurl: config.headerimgurl,
				tablist: [{
						id: 1,
						name: '全部',
						isrequest: true,
					},
					{
						id: 2,
						name: '待开奖',
						isrequest: false,
					},
					{
						id: 3,
						name: '我中奖',
						isrequest: false,
					},
					{
						id: 4,
						name: '未中奖',
						isrequest: false,
					},
				],
				stat: 1,
				page: [1, 1, 1, 1, 1],
				max_page: [1, 1, 1, 1, 1],
				listdata: {
					1: [],
					2: [],
					3: [],
					4: [],
				},

				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
			};
		},
		onLoad() {
			this.orderLogs(1);
		},
		onReachBottom() {

		},
		methods: {
			scrolltolower() {
				if (this.page[this.stat] >= this.max_page[this.stat]) {
					this.status = 'nomore'
					return;
				}
				this.status = 'loading';
				this.page[this.stat] = ++this.page[this.stat];
				this.orderLogs(this.stat)
				setTimeout(() => {
					if (this.page[this.stat] > this.max_page[this.stat] || this.page[this.stat] == this.max_page[
							this
							.stat]) this.status = 'nomore';
					else this.status = 'loading';
				}, 500)
			},

			// tab
			tabchange(id) {
				this.stat = id
				// console.log(id);
				if (this.tablist[id - 1].isrequest == false) {
					this.orderLogs(id);
				}
			},

			async orderLogs(type) {
				let res = await this.$http.index.orderLogs({
					page: this.page[type],
					type: type
				})
				this.listdata[type] = [...this.listdata[type], ...res.data]
				this.tablist[type - 1].isrequest = true
				this.max_page[type] = res.page;
				if (this.page[type] > this.max_page[type] || this.page[type] == this.max_page[type]) this.status =
					'nomore';
			},
		},
	}
</script>

<style lang="less" scoped>
	.main {
		padding: 10px;

	}

	.top_min {
		height: 90%;
		overflow-y: auto;
	}

	.zone {
		height: 100vh;
		background: linear-gradient(180deg, #0477FD 0%, #7AFDCF 100%);
	}

	// tab导航
	.tab {
		width: 100%;
		display: flex;
		align-items: center;
		background: rgba(255, 255, 255, 0.7);
		padding: 8px;
		box-shadow: inset 0px 0px 3px 0px rgba(255, 255, 255, 0.34);
		border-radius: 12px;
		overflow: hidden;
		margin: 0 auto;

		view {
			width: 50%;
			height: 36px;
			text-align: center;
			line-height: 36px;
			color: rgba(52, 52, 52, 0.61);
			font-size: 13px;
			font-weight: 600;
		}
	}

	.active {
		color: #fff !important;
		background: #000;
		border-radius: 8px;
	}


	.list {
		margin-top: 12px;

		.itembox {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: rgba(255, 255, 255, 0.9);
			border-radius: 6px;
			padding: 12px;
			margin: 10px 0;

			text {
				font-weight: 600;
				font-size: 14px;
			}
		}
	}

	.color1 {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;

		text {
			display: block;

			width: 57px;
			height: 26px;
			background: url('http://img.cpgm.cc/panda/static/public/btn7.png') !important;
			background-size: 100% 100% !important;
			border-radius: 4px;
			font-size: 12px;
			font-weight: 500;
			color: #B73800 !important;
			text-align: center;
			line-height: 25px;
		}
	}

	.color2 {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #239D4C !important;
	}

	.color3 {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #000 !important;
	}

	.outside {
		background: #FFFFFF linear-gradient(180deg, rgba(71, 179, 226, 0.21) 0%, rgba(101, 231, 255, 0.21) 100%);
		width: 55px;
		border-radius: 7px;
		height: 55px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10px;

		image {
			width: 95%;
		}
	}

	.left {
		display: flex;
		align-items: center;
		flex: 3;
	}

	.word {
		display: flex;
		flex-direction: column;

		text {
			width: 100px;
			white-space: nowrap;
			/*不允许换行*/
			overflow: hidden;
			/*超出隐藏*/
			text-overflow: ellipsis;
			/*文本超出三点代替*/
			color: #000;
			font-size: 15px;
		}

		view {
			background: #FFFFFF;
			border-radius: 0px 11px 11px 0px;
			border: 1px solid #E5E5E5;
			padding: 2px 5px;
			font-size: 12px;
			color: rgba(255, 255, 255, .7);
			margin-top: 5px;
			color: #000;

			text {
				font-size: 12px;
				font-weight: bold;
				color: #fff;
				line-height: 18px;
				background: linear-gradient(180deg, #FF2F00 0%, #FF8758 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
	}
</style>